<template>
    <div class="common-layout">
        <el-container>
            <el-header height="150px" class="head" align="center">
                <p class="title">查询车辆信息</p>
                <div class="input-group">
                    <label class="inputlabel">车号: <el-input style="width: 240px" v-model="carNumber"
                            placeholder="请输入车号"></el-input></label>
                    <el-button style="width: 150px;height: 30px; background-color: cadetblue;color: white;"
                        @click="SearchOne">搜索</el-button>
                    <el-button style="width: 150px;height: 30px; background-color: #4caf50;color: white;"
                        @click="ShowAddDialog">新增</el-button>
                </div>
            </el-header>
            <el-main id="main">
                <el-table :data="Store.tableData" width="70%" height="480" align="center">
                    <el-table-column prop="carNumber" label="车号" width="200" align="center" />
                    <el-table-column prop="modelId" label="车型编号" width="200" align="center" />
                    <el-table-column prop="carPrice" label="车价" width="200" align="center" />
                    <el-table-column prop="isRented" label="是否已出租" width="200" align="center" />
                    <el-table-column label="操作" align="center" width="250" >
                        <template v-slot="scope">
                            <el-popover placement="right" :width="400" trigger="click">
                                <template #reference>
                                    <el-button
                                        style="margin-right: 16px;background-color: cadetblue;color: white;">更改</el-button>
                                </template>
                                <el-form label-position="left" label-width="auto">
                                    <el-form-item label="车号:">
                                        <el-input v-model="scope.row.carNumber" disabled />
                                    </el-form-item>
                                    <el-form-item label="车型编号:">
                                        <el-input v-model="scope.row.modelId" />
                                    </el-form-item>
                                    <el-form-item label="车价:">
                                        <el-input v-model="scope.row.carPrice" />
                                    </el-form-item>
                                    <el-form-item label="是否已出租:">
                                        <el-input v-model="scope.row.isRented" />
                                    </el-form-item>
                                </el-form>
                                <el-button @click="Update(scope.row)" class="button"
                                    style="background-color: cadetblue;color: white;">提交</el-button>
                            </el-popover>
                            <el-button @click="Delete(scope.row.carNumber)"
                                style="background-color: brown; color: white;" plain>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>

        <el-dialog title="新增车辆" v-model="addDialogVisible">
            <el-form label-position="left" label-width="auto">
                <el-form-item label="车型编号:">
                    <el-input v-model="newCar.modelId" />
                </el-form-item>
                <el-form-item label="车价:">
                    <el-input v-model="newCar.carPrice" />
                </el-form-item>
                <el-form-item label="是否已出租:">
                    <el-input v-model="newCar.isRented" />
                </el-form-item>
            </el-form>
            <el-button @click="AddCar" class="button" style="background-color: #4caf50;color: white;">提交</el-button>
        </el-dialog>
    </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue'
import useCarStore from '../../store/useCarStore.js'

const carNumber = ref('');
const modelId = ref('');
const addDialogVisible = ref(false);
const newCar = ref({
    modelId: '',
    carPrice: '',
    isRented: ''
});

const Store = useCarStore()

// 挂载时参数为空，查询全部数据
onMounted(() => {
    Store.Search();
});

// 有条件查询
function SearchOne() {
    if (!carNumber.value) {
        ElMessage.error('请输入车号');
        Store.Search();
        return;
    }
    Store.SearchOne(carNumber.value);
}

// 显示新增对话框
function ShowAddDialog() {
    addDialogVisible.value = true;
}

// 新增车辆信息
function AddCar() {
    Store.AddCar(newCar.value).then(() => {
        Store.Search();
        ElMessage({
            type: 'success',
            message: '新增成功',
        });
    }).catch(() => {
        ElMessage({
            type: 'error',
            message: '新增失败',
        });
    });
    addDialogVisible.value = false;
}

// 删除车辆信息
function Delete(carNumber) {
    ElMessageBox.confirm(
        '是否删除',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        Store.DeleteCar(carNumber);
        ElMessage({
            type: 'success',
            message: '删除成功',
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '删除失败',
        })
    })
}

// 更新车辆信息
function Update(row) {
    ElMessageBox.confirm(
        '是否更改',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        Store.UpdateCar(row);
        ElMessage({
            type: 'success',
            message: '更改成功',
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '更改失败',
        })
    })
}
</script>

<style scoped>
.title {
    height: 30px;
    margin-bottom: 15px;
    padding-top: 15px;
    font-size: 20px;
    font-weight: 100;
}

.head {
    margin-left: 30px;
}

.main {
    position: relative;
    top: 20px;
}

.inputlabel {
    border: 0px solid black;
    margin-right: 20px;
}
</style>
